import defaultSettings from '@config/index'
import Utils from '@utils/index'
import variables from '@styles/element-variables.scss'
import Theme from '@theme'
const {
  showSettings,
  messageTips,
  tagsView,
  fixedHeader,
  sidebarLogo
} = defaultSettings
const state = {
  showSettings: showSettings,
  messageTips: Utils.localStorage.get('messageTips') || messageTips,
  theme: Utils.localStorage.get('theme') || variables.theme,
  tagsView: Utils.localStorage.get('tagsView') || tagsView,
  fixedHeader: fixedHeader,
  sidebarLogo: sidebarLogo,
  isOpenSetting: false
}

const mutations = {
  CHANGE_SETTING: (state, {
    key,
    value
  }) => {
    // eslint-disable-next-line no-prototype-builtins
    if (state.hasOwnProperty(key)) {
      state[key] = value
    }
  },
  THEME_CHANGE_SETTING: (state, payload) => {
    if (payload) {
      Utils.localStorage.set('theme', payload)
      if (payload) {
        const thmeObj = new Theme(payload)
      }
    }
    state.theme = payload
  },
  MESSAGE_TIPS: (state, payload) => {
    Utils.localStorage.set('messageTips', payload)
    state.messageTips = payload
  },
  TAGS_VIEW: (state, payload) => {
    Utils.localStorage.set('tagsView', payload)
    state.tagsView = payload
  },
  SET_ISOPENSETTING: (state, payload) => {
    state.isOpenSetting = payload
  }
}

const actions = {
  changeSetting ({
    commit
  }, data) {
    commit('CHANGE_SETTING', data)
  },
  themeChangeSetting ({ commit }, payload) {
    commit('THEME_CHANGE_SETTING', payload)
  },
  messageTipsChange ({ commit }, payload) {
    commit('MESSAGE_TIPS', payload)
  },
  tagsViewChange ({ commit }, payload) {
    commit('TAGS_VIEW', payload)
  },
  reset ({ commit, state }) {
    commit('CHANGE_SETTING', '')

    commit('MESSAGE_TIPS', '')
    commit('TAGS_VIEW', '')
  },
  setOpenSetting: ({ commit }, payload) => {
    commit('SET_ISOPENSETTING', payload)
  },
  clearTheme ({ commit, state }) {
    state.theme = ''
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
